import './PersonMachine.scss'
import { useState } from 'react'

import dayjs from 'dayjs'

import { project } from '../../../../Common/Data'
import { useMount, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { FrontModalBox } from '../Modal'

const { imageUrl } = project[window.location.hostname]

export const PersonMachineA01 = ({ org }) => {
    const [Value, setValue] = useState({ A01: 0, A02: 0, A03: 0, A04: 0 })

    const { runAsync: getPerson } = useRequest(Http, { manual: true })
    const { runAsync: getMachine } = useRequest(Http, { manual: true })

    useMount(() => {
        getPerson({
            url: 'getPersonStatGetPersonTypeStatAttendanceByOrg',
            data: {
                OrganizationUuid: org || '',
                Date: dayjs().format('YYYY-MM-DD'),
            },
        }).then(res => {
            let A01 = 0
            let A02 = 0
            res.list.forEach(item => {
                A01 += item.personCount
                A02 += item.attendanceCount
            })
            getMachine({ url: 'getOrgMachineCount', data: { OrganizationUuid: org } }).then(res => {
                let A03 = 0
                let A04 = 0
                res.list.forEach(item => {
                    A03 += item.machineTypeStandardCount
                    A04 += item.machineCount
                })
                setValue({ A01, A02, A03, A04 })
            })
        })
    })

    const Label = [
        {
            uuid: 1,
            title: '人员管理',
            icon: 'S0101.png',
            children: [
                { uuid: 11, title: '进场人数', value: 'A01', unit: '人' },
                { uuid: 12, title: '出勤人数', value: 'A02', unit: '人' },
            ],
        },
        {
            uuid: 2,
            title: '机械管理',
            icon: 'S0102.png',
            children: [
                { uuid: 21, title: '计划数量', value: 'A03', unit: '辆' },
                { uuid: 22, title: '进场数量', value: 'A04', unit: '辆' },
            ],
        },
    ]

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="PersonMachineA01">
            {Label.map(({ uuid, title, icon, children }) => (
                <div
                    key={uuid}
                    onClick={() => {
                        if (uuid === 1)
                            setOptionsCall({
                                type: 'TableList',
                                data: { title: '人员出勤统计', type: 'SecondaryPersonnelTemplate' },
                            })
                    }}
                >
                    <div>
                        <img src={imageUrl + icon} alt="" />
                        <div>{title}</div>
                    </div>
                    <div>
                        {children.map(({ uuid, title, value, unit }) => (
                            <div key={uuid}>
                                <div>{title}</div>
                                <div>
                                    {Value[value]} <span>{unit}</span>{' '}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            ))}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
